<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script src="../../helpers/header.js" type="module"></script>
    <script src="script.js" type="module"></script>
  </head>
  <body>
    <div class="container">
      <form id="bmiForm">
        <label for="height" class="label">Height (cm):</label>
        <input type="number" class="input" id="height" placeholder="Enter height" required />

        <label for="weight" class="label">Weight (kg):</label>
        <input type="number" class="input" id="weight" placeholder="Enter weight" required />

        <button type="submit" class="button">Calculate BMI</button>
      </form>

      <div id="result">
        <h2>Your BMI:</h2>
        <p id="bmiValue"></p>
      </div>
    </div>
  </body>
</html>
